import React, { Component } from 'react'
import { browserHistory } from 'react-router'
import { isEmpty, isUndefined } from 'lodash/fp'
import Helmet from 'react-helmet'
import cookie from 'react-cookie'
import { message } from 'antd'

import { bindWechat } from 'tools/bindWechat'
import { singUpAjax, createAjax } from 'tools/bindQiniu'
import s from '../assets/Sign.scss'

class Signin extends Component {

  constructor (props, context) {
    super(props, context)
    this.setTime = this.setTime.bind(this)
    this.state = {
      phone: '',
      code: '',
      time: 60,
      verification: 'message',
      codeStateText: '点击获取',
      key: '',
    }
    this.timer = false
  }

  componentDidMount () {}

  componentWillMount () {}

  componentWillUnmount () {
    clearInterval(this.timer)
    this.timer = false
  }

  componentWillReceiveProps (nextProps) {
    const { user } = nextProps
    const { regcode, singUp, signed } = user
    const { result } = regcode
    if (!isUndefined(user) && !isUndefined(regcode) && !isUndefined(result) && !isUndefined(result.data) && user.isFetching !== this.props.user.isFetching) {
      this.setState({
        key: result.data.key
      })
      this.timer = setInterval(this.setTime, 1000)
    }
    if (!isUndefined(singUp) && !isEmpty(singUp) && !isUndefined(singUp.result.data) && !isEmpty(singUp.result.data) && !isUndefined(singUp.result.data.user_token)) {
      message.success('登录成功!')

      this.context.router.push('/')
    }
    if (!isUndefined(signed) && !isUndefined(signed.result) && signed.result.status > 0) {
      this.context.router.push('/')
    }
  }

  getInput (e) {
    let value = e.target.value
    switch (e.target.id) {
      case 'myPhone':
        if (value.length > 40) break
        this.setState({
          phone: value
        })
        break
      case 'myCode':
        if (value.length > 6) break
        this.setState({
          code: value
        })
        break
      default:
    }
  }

  getCode () {
    const { regCode } = this.props
    let phone = this.refs.myPhone.value
    if (isUndefined(phone) || phone.length !== 11 || !(/^1[3|4|5|7|8]\d{9}$/.test(phone))) {
      message.error('请输入正确手机号')
      return
    }
    this.setState({
      verification: 'code'
    })
    regCode(phone)
  }

  getLogin () {
    let phone = this.refs.myPhone.value
    let code = this.refs.myCode.value
    let res = ''
    const { singUp } = this.props
    if (isUndefined(phone) || phone.length !== 11 || !(/^1[3|4|5|7|8]\d{9}$/.test(phone))) {
      message.error('请输入正确手机号')
      return
    } else if (this.state.key === '') {
      message.error('请获取验证码')
      return
    } else if (isUndefined(code) || code.length < 6) {
      message.error('请输输入正确验证码')
      return
    }
    clearInterval(this.timer)
    this.setState({
      time: 1,
      codeStateText: '重新发送',
      'verification': 'message'
    })
    singUp(phone, code, this.state.key)
    // res = createAjax(phone, code, this.state.key)
    // singUp(phone, code, this.state.key)
  }

  setTime () {
    let time = this.state.time
    if (this.state.time === 0) {
      this.setState({
        time: 1,
        codeStateText: '重新发送',
        'verification': 'message'
      })
      clearInterval(this.timer)
      return
    } else {
      if (this.timer !== false) {
        this.setState({
          time: time -= 1,
          codeStateText: '已发送 (' + this.state.time + 's)'
        })
      }
    }
  }

  render () {
    const { user } = this.props
    const { regcode } = user
    return (
      <div className={s.signContain}>
        <header>登录/注册</header>
        <section>
          <p>
            <input type='text' id='myPhone' placeholder='您的手机' value={this.state.phone} ref='myPhone' onChange={e => this.getInput(e)} />
          </p>
          <p>
            <input type='text' id='myCode' className={s.getCaptchText} placeholder='短信验证码' value={this.state.code} ref='myCode' onChange={e => this.getInput(e)} />
            { this.state.verification === 'code' ?
              <span className={s.messages}>{this.state.codeStateText}</span>
              :
              <span className={s.getCaptch} onClick={ e => this.getCode() }>{this.state.codeStateText}</span>
            }
          </p>
          <input type='button' className={s.btnLogin} value='注册/登录' onClick={ e => this.getLogin() } />
        </section>
      </div>
    )
  }
}

Signin.propTypes = {

}

Signin.contextTypes = {
  router: React.PropTypes.object.isRequired
}

export default Signin
